<template>
	<div class="list">
		<div class="wrap" v-for="item in list" :data-id="item" @click="change(item)">
			<img :src="item.homePicture" alt="" class="pic">
			<div class="rbox">
				<p class="title">{{item.activityTitle}}</p>
				<p class="detail">{{item.addressDetailed}}</p>
				<p class="content"><span class="time">{{item.activityStartTime}}</span><span v-if="item.activityStatus == 1">进行中</span><span v-if="item.activityStatus == 2" class="end">结束</span></p>
			</div>
		</div>
		
	</div>
</template>

<script>
	import md5 from 'js-md5';
	let Base64 = require('js-base64').Base64;
	export default {
		data() {
			return {
				pi:'1',
				list:[]
			};
		},
		created () {//先执行
		
			let parameter = Base64.encode(JSON.stringify({pi:this.pi}));
			let sign = md5(parameter + this.$key)
			
			this.$ajax.get('getActivityList.ashx?parameter='+parameter+'&sign='+sign)
			.then((res)=>{
				
				if(res.data.code == 200){
					this.list = res.data.data.ActList
				}else{
					this.$toast(res.data.msg);
				}
			})
			.catch(function (error) {
				console.log(error);
			});
			
		},
		methods:{
			change(e){
				
				if(e.activityStatus == 1){
					this.$router.push({
						path:'index',
						query:{id:e.activityID}
					})
				}else{
					this.$toast('活动已结束');
				}
			}
		}
	}
</script>

<style>
.list{width: 100%;}
.wrap{padding: 10px 0;display: flex;align-items: center;border-bottom: 1px solid #ccc;margin: 0 15px;}
.wrap .pic{width: 90px;height: 80px;display: block;}
.wrap .rbox{display: flex;flex-direction: column;justify-content: space-around;flex: 2;text-align: left;margin-left: 15px;}
.wrap .rbox .title{font-size: 14px;color: #000;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;
-webkit-line-clamp: 2;}
.wrap .rbox .detail{font-size: 12px;color: #666;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;margin-top: 5px;
-webkit-line-clamp: 1;}
.wrap .rbox .content{display: flex;justify-content: space-around;align-items: center;margin-top: 5px;}
.wrap .rbox .content span{font-size: 12px;color: #666;}
.wrap .rbox .content span.time{flex: 2;}
.wrap .rbox .content span.end{color: darkred;}
</style>
